<template xmlns="http://www.w3.org/1999/html">
  <div class="app-container">

    <div class="box-all">

<!--      <div class="hospital"> xxx 宠物医院</div>-->

      <div class="zhongjian">
        <div class="left">
          <el-descriptions title="主人信息">
            <el-descriptions-item label="主人姓名"> {{this.querypet.customerName}}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{this.querypet.customerPhone}}</el-descriptions-item>
            <el-descriptions-item label="联系地址">{{this.querypet.customerName}} </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="宠物信息">
            <el-descriptions-item label="宠物名称">{{this.querypet.petName}}</el-descriptions-item>
            <el-descriptions-item label="宠物性别">{{this.querypet.sex}}</el-descriptions-item>
            <el-descriptions-item label="宠物年龄">{{this.querypet.age}} 岁</el-descriptions-item>
            <el-descriptions-item label="宠物类型">{{this.querypet.petType}}</el-descriptions-item>
            <el-descriptions-item label="宠物毛色">{{this.querypet.coatColor}}</el-descriptions-item>
            <el-descriptions-item label="宠物体重">{{this.querypet.weight}} Kg</el-descriptions-item>
            <br>
            <el-descriptions-item label="症状描述">{{this.querypet.symptom}}</el-descriptions-item>
          </el-descriptions>
          <br>
          <h1>诊断意见</h1>
          <el-input
            type="textarea"
            autosize
            placeholder="请输入诊断意见"
            v-model="prescriptionResult">
          </el-input>
          <br>

          <!--          -->
          <h1>处方单</h1>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddchufang"
              >新增</el-button>
            </el-col>
          </el-row>

          <template>
            <el-table :data="tableDatacf" style="width: 100%" max-height="250">
             <el-table-column fixed prop="materielId" label="编码" ></el-table-column>
              <el-table-column fixed prop="ypname" label="项目名称" ></el-table-column>
              <el-table-column prop="planNum" label="数量" ></el-table-column>
              <el-table-column prop="specification" label="规格" ></el-table-column>
              <el-table-column prop="dosage" label="用量" ></el-table-column>
              <el-table-column prop="medicationInstruction" label="用法"></el-table-column>
              <el-table-column prop="materielCode" label="条码"></el-table-column>
              <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRowcf(scope.$index, tableDatacf)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>

          <br>
          <h1>检查单</h1>

          <el-row :gutter="10" class="mb8"><el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAddjiancha"
              >新增</el-button>
            </el-col>
          </el-row>

          <template>
            <el-table :data="tableDatajc" style="width: 100%" max-height="250">
              <el-table-column fixed prop="inspectionId" label="编码" ></el-table-column>
              <el-table-column fixed prop="jcname" label="项目名称" ></el-table-column>
              <el-table-column prop="number" label="次数" ></el-table-column>
              <el-table-column prop="address" label="位置" ></el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRowjc(scope.$index, tableDatajc)"
                    type="text"
                    size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>




        </div>

        <div class="right">

          <el-form :model="querypetlist" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

            <el-form-item label="就诊状态" prop="consultationStatus">
              <el-select v-model="querypetlist.consultationStatus" placeholder="请选择就诊状态" clearable>
                <el-option
                  v-for="dict in dict.type.consultation_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="手机号码" prop="customerPhone">

              <el-input
                v-model="querypetlist.customerPhone"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter.native="handleQuery"
                style="width:80%;"
              />
            </el-form-item>



            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>



          <h1>待接诊</h1>
<!--          <el-table v-loading="loading" :data="ConsultationRecordList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="就诊号" align="center" prop="consultationNo"  :formatter="formatConsultationNo" />-->


            <el-table v-loading="loading" :data="ConsultationRecordList"  @cell-dblclick="handleCurrentChangepet">
            <el-table-column label="就诊号" align="center" prop="consultationNo" :formatter="formatConsultationNo" />
            <el-table-column label="手机号" align="center" prop="customerPhone" />
            <el-table-column label="主人姓名" align="center" prop="customerName" />

            <el-table-column label="宠物名称" align="center" prop="petName" />
<!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['hospital:ConsultationRecord:edit']"
                >接诊</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParamsConsultationRecord.pageNum"
            :limit.sync="queryParamsConsultationRecord.pageSize"
            @pagination="getqueryConsultationRecord"
          />

        </div>
      </div>


      <div class="bottom">
        <div id="app2">
          <el-row :gutter="10" class="mb8">
            <el-col :span="5">
              <el-button
                type="warning"
                round
                icon="el-icon-plus"
                @click="submitForm"
                v-hasPermi="['hospital:customer:add']"
              >结束就诊</el-button>
            </el-col>
          </el-row>
        </div>

      </div>
    </div>

    <!-- 添加处方药品 -->
    <el-dialog :title="titlecf" :visible.sync="opencf" width="500px" append-to-body>
      <el-form ref="formcf" :model="formcf" :rules="rulescf" label-width="80px">

        <el-form-item label="药品名称" prop="ypname">
        <el-autocomplete
          popper-class="my-autocomplete"
          v-model="formcf.ypname"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect">
          <i
            class="el-icon-edit el-input__icon"
            slot="suffix"
            @click="handleSelect">
          </i>
          <template slot-scope="{ item }">
            <div class="name">{{ item.value }}</div>
            <span class="specification">{{ item.specification }}</span>

          </template>
        </el-autocomplete>
        </el-form-item>

        <el-form-item label="数量" prop="planNum">
          <el-input v-model="formcf.planNum" placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="规格" prop="specification">
          <el-input v-model="formcf.specification" placeholder="请输规格"  :disabled="true"/>
        </el-form-item>
        <el-form-item label="用量" prop="dosage">
          <el-input v-model="formcf.dosage" placeholder="请输入用量" />
        </el-form-item>
        <el-form-item label="用法" prop="medicationInstruction">
          <el-input v-model="formcf.medicationInstruction" placeholder="请输入用法" />
        </el-form-item>
        <el-form-item label="条码" prop="materielCode">
          <el-input v-model="formcf.materielCode" placeholder="请输入条码"  :disabled="true"/>
        </el-form-item>

        <el-form-item label="ID" prop="materielId">
          <el-input v-model="formcf.materielId" placeholder="请输入ID"  :disabled="true"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormcf">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <!-- 添加检查项目 -->
    <el-dialog :title="titlejc" :visible.sync="openjc" width="500px" append-to-body>
      <el-form ref="formjc" :model="formjc" :rules="rulesjc" label-width="80px">

        <el-form-item label="检查名称" prop="jcname">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="formjc.jcname"
            :fetch-suggestions="querySearchAsyncjc"
            placeholder="请输入检查名称"
            @select="handleSelectjc">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleSelectjc">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="specification">{{ item.inspectionNo }}</span>

            </template>
          </el-autocomplete>

        </el-form-item>

        <el-form-item label="次数" prop="number">
          <el-input v-model="formjc.number" placeholder="请输入次数" />
        </el-form-item>
        <el-form-item label="位置" prop="address">
          <el-input v-model="formjc.address" placeholder="请输入位置" />
        </el-form-item>
        <el-form-item label="编码" prop="inspectionId">
          <el-input v-model="formjc.inspectionId" placeholder="编码" :disabled="true"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormjc">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCustomergh, queryConsultationRecord, addCustomerpetjz, listMateriel, listInspection, } from "@/api/hospital/PetHospital";
import Brand from "@/views/hospital/Brand/index.vue";


export default {
  name: "Customer",
  components: { Brand },
  dicts: ['sys_user_sex', 'pet_sex', 'pet_type', 'consultation_status'],
  data() {
    return {
      tableDatacf: [],
      tableDatajc: [],

      // 遮罩层
      loading: false,
      // 选中数组
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,

      // 弹出层标题
      titlecf: "",
      titlejc: "",
      // 是否显示弹出层
      opencf: false,
      openjc: false,

      ConsultationRecordList: [],
      //就诊列表 查询参数
      querypetlist : {
        pageNum: 1,
        pageSize: 10,
        consultationStatus: null,
        customerPhone: null,
        //默认只获取当天时间就诊但
        startTime : null,
        endTime : null,

      },

      queryParamsConsultationRecord: {
        pageNum: 1,
        pageSize: 10,
        consultationNo: null,
        customerId: null,
        customerPhone: null,
        customerName: null,

        consultationId: null,
        consultationCode: null,

        petId: null,
        petName: null,
        sex: null,
        age: null,
        petType: null,
        weight: null,
        coatColor: null,
        consultationStatus: null,
        consultationStatusName: null,
        consultationTime: null,
        symptom: null,
        prescription: null,

        //默认只获取当天时间就诊但
        startTime : null,
        endTime : null,
      },

      //就诊列表 查询参数
      querypetinformation : [],
      querypet: {
        pageNum: 1,
        pageSize: 10,
        consultationNo: null,
        customerId: null,
        customerPhone: null,
        customerName: null,

        consultationId: null,
        consultationCode: null,

        petId: null,
        petName: null,
        sex: null,
        age: null,
        petType: null,
        weight: null,
        coatColor: null,
        consultationStatus: null,
        consultationStatusName: null,
        consultationTime: null,
        symptom: null,
        prescription: null,

        //默认只获取当天时间就诊但
        startTime : null,
        endTime : null,
      },



      // 表单参数
      formcf: {},
      formjc: {},
      // 表单校验
      rulescf: {
        ypname: [
          { required: true, message: "项目名称不能为空", trigger: "blur" }
        ],
        planNum: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        specification: [
          { required: true, message: "规格不能为空", trigger: "blur" }
        ],
        dosage: [
          { required: true, message: "用量不能为空", trigger: "blur" }
        ],
        medicationInstruction: [
          { required: true, message: "用法不能为空", trigger: "blur" }
        ],

      },
      rulesjc: {
        jcname: [
          { required: true, message: "检查名称不能为空", trigger: "blur" }
        ],
        num: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        address: [
          { required: true, message: "位置不能为空", trigger: "blur" }
        ],
      },

      restaurants: [],
      state: '',
      timeout: null,

      //开处方测试test
      prescriptionResult : null,
      jztest : {
        consultationId : '31', //就诊id
        prescriptionResult : '',  // 处方诊断结果
        prescriptionType : '0',  //处方类型0普通处方1住院处方
        bedNumber : null,  //床号
        prescriptionDetail : [], //处方明细 药品
        inspectionRecordList : [], //检查项目
      },
      //处方集合
      prescriptionDetail : [],
      //检查项目集合
      inspectionRecordList : [],

      queryprescriptionDetail :{
        materielId : null,    //物资id
        materielCode : null,  //物资编码
        name : null,
        planNum : null,       //数量
        specification : null, //规格
        medicationInstruction : null,  //用药指导   用法
        dosage : null,  //用量
       /* materielAmount : '2.00',  //物资金额
        materielRealityAmount : '2.00', //实际金额
        materielDiscount : '0',  // 物资折扣*/
      },

      queryinspectionRecordList : {
        id : null, //检查记录id
        inspectionStatus : null, //检查状态0未开始1检查中2已完成
        inspectionResult : null, //检查结果
        sn : null,  //设备SN码
      },

      // 检查项目查询参数
      queryinspection: {
        pageNum: 1,
        pageSize: 10,
        tenantId: null,
        deptId: null,
        inspectionNo: null,
        inspectionCode: null,
        inspectionName: null,
        inspectionDes: null,
        balance: null,
      },

      // 处方药品查询参数
      querymaterie: {
        pageNum: 1,
        pageSize: 10,
        tenantId: null,
        deptId: null,
        name: null,
        classify: null,
        classifyS: null,
        supplier: null,
        brand: null,
        petType: null,
        expirationDate: null,
        barCode: null,
        barCodeS: null,
        specification: null,
        unit: null,
        standardPurchasingCost: null,
        averageCostPrice: null,
        retailPrice: null,
        memberPrice: null,
        negativeOnHandType: null,
        inventoryWarning: null,
        memberDiscountType: null,
        repurchaseType: null,
        weight: null,
        materielId: null
      },
      // 物资表格数据
      MaterielList: [],
      // 检查项目信息表格数据
      InspectionList: [],
    };
  },
  created() {
    //进来直接先查询宠物就诊记录 默认查当天。
    // this.getConsultationRecordList();
    //根据医生查询就诊宠物信息
    this.getqueryConsultationRecord();

  },

  methods: {
// 获取处方药品信息。
    async loadAll() {
      // 获取药品列表
      this.loading = true;
      const response =  await listMateriel(this.querymaterie)
      this.loading = false;
      //console.log(response)
      const list = response.rows.map(materie => ({ value: materie.name,
                                                   materieId: materie.id ,
                                                   specification :materie.specification ,
        materielCode:materie.barCode}));
      //console.log(list)
      return list;

    },
    async querySearchAsync(queryString, cb) {
      const res = await this.MaterielList
      var restaurants = res
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      //@@  项目优化点   获取时间加大！！！！
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log(results)
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },
    handleSelect(item) {
      //选中药品，  将药品名称写入到 输入框。 规格型号回传到 from
      this.formcf.specification = item.specification;
      this.formcf.materielCode = item.materielCode;
      this.formcf.materielId = item.materieId;
      this.querymaterie.id = item.id;

    },

    // 获取检查项目列表
    async loadAlljc() {
      // 获取药品列表
      this.loading = true;
      const response =  await listInspection(this.queryinspection)
      this.loading = false;
      //console.log(response)
      const list = response.rows.map(inspection => ({ value: inspection.inspectionName,
        id: inspection.id ,
        inspectionNo :inspection.inspectionNo ,
       }));
      //console.log(list)
      return list;

    },
    async querySearchAsyncjc(queryString, cb) {
      const res = await this.InspectionList
      var restaurants = res
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
      //@@  项目优化点   获取时间加大！！！！
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log(results)
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilterjc(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },
    handleSelectjc(item) {
      //选中药品，  将药品名称写入到 输入框。 规格型号回传到 from
      //console.log(item);
      this.formjc.specification = item.specification;
      this.formjc.inspectionId = item.id;
      this.querymaterie.id = item.id;

    },

    // 就诊号 只展示后三位  前面是0 去掉
    formatConsultationNo(row, column, cellValue) {
      // 将单元格的值转为字符串
      const value = String(cellValue);
      // 使用正则表达式提取后三位数字
      const match = value.match(/(\d{3})$/);

      if (match) {
        // 如果匹配成功，返回提取的后三位数字
        let num = match[1];
        // 去掉前导0
        num = num.replace(/^0+/, '');
        return num;
      } else {
        // 如果匹配失败，返回空字符串
        return '';
      }
    },

    /** 提交按钮 */
    submitFormcf() {
      this.$refs["formcf"].validate(valid => {
        this.tableDatacf.push(JSON.parse(JSON.stringify(this.formcf)));
        this.opencf = false;
        console.log(this.tableDatacf)
        // 暂存在这个data。 接诊。复诊的时候获取这个data 判断是否有数据。  有的话将数据传入后台，进行缓存
      });
    },
    submitFormjc() {
      this.$refs["formjc"].validate(valid => {
        this.tableDatajc.push(JSON.parse(JSON.stringify(this.formjc)));
        this.openjc = false;
        // 暂存在这个data。 接诊。复诊的时候获取这个data 判断是否有数据。  有的话将数据传入后台，进行缓存
      });
    },

    //date数据移除
    deleteRowcf(index, rows) {
      rows.splice(index, 1);
    },
    //date数据移除
    deleteRowjc(index, rows) {
      rows.splice(index, 1);
    },


    getDatetoday(){
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
     // console.log(year + "-" + month + "-" + day);

      return year + "-" + month + "-" + day
    },
    getDateyesterday(){
      var today = new Date();
      var yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
      var year = yesterday.getFullYear();
      var month = yesterday.getMonth() + 1;
      var day = yesterday.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      //console.log(year + "" + month + "" + day);
      return year + "-" + month + "-" + day

    },

    /** 查询宠物就诊记录列表 */
    getqueryConsultationRecord() {
      //只查询当天数据
      this.queryParamsConsultationRecord.startTime = this.getDatetoday() + "  00:00:00";
      this.queryParamsConsultationRecord.endTime   = this.getDatetoday() + "  23:59:59";
      //第一次进来默认查询待就诊患者
      this.queryParamsConsultationRecord.consultationStatus = '0';
      this.loading = true;
      queryConsultationRecord(this.queryParamsConsultationRecord).then(response => {
        this.ConsultationRecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.opencf = false;
      this.openjc = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formcf = {};
      this.formjc = {};
      this.form = {
        id: null,
        name: null,
        age: null,
        sex: null,
        cardNo: null,
        birthday: null,
        phone: null,
        address: null,
        customerType: null,
        tenantId: null,
        delFlag: null,
        inviteUserId: null,
        registrationType: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null

      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      //只查询当天数据
      this.querypetlist.startTime = this.getDatetoday() + "  00:00:00";
      this.querypetlist.endTime   = this.getDatetoday() + "  23:59:59";
      this.loading = true;
      queryConsultationRecord(this.querypetlist).then(response => {
        this.ConsultationRecordList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      //this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAddchufang() {
      this.reset();
      this.opencf = true;
      this.titlecf = "添加处方用药";
    },
    handleAddjiancha() {
      this.reset();
      this.openjc = true;
      this.titlejc = "添加检查项目";
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      addCustomergh(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改客户基础信息";
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('hospital/Customer/export', {
        ...this.queryParams
      }, `Customer_${new Date().getTime()}.xlsx`)
    },

    //双击选中医生    弹框确认挂号信息。
    handleCurrentChangepet(val) {
      this.queryParamsConsultationRecord = val;
      //这里获取就诊编号 根据此条件 查找到精确数据  会写到页面。
      const id = val.consultationNo;

      this.queryParamsConsultationRecord.consultationNo = id;
      //只查询当天数据
      this.queryParamsConsultationRecord.startTime = this.getDatetoday() + "  00:00:00";
      this.queryParamsConsultationRecord.endTime   = this.getDatetoday() + "  23:59:59";
      queryConsultationRecord(this.queryParamsConsultationRecord).then(response => {
        ///console.log(response.rows)

        this.querypetinformation = response.rows;
        this.querypet  = this.querypetinformation[0];
       // console.log(this.querypet);
      });
    },

    /** 结束就诊 */
    submitForm() {
      //this.loading = true;
      this.$refs["queryForm"].validate(valid => {
          if (valid) {

            //拼装数据   目前不考虑住院宠物 ，默认全部门诊宠物，。
            this.jztest.consultationId = this.querypet.consultationId;
            this.jztest.prescriptionResult = this.prescriptionResult;
            this.jztest.prescriptionType = '0';
            this.jztest.bedNumber = null;

            //处方单项目
            this.jztest.prescriptionDetail = this.tableDatacf;
            //检查单项目
            this.jztest.inspectionRecordList = this.tableDatajc;

         /*   console.log(this.queryinspectionRecordList)
            console.log(this.queryprescriptionDetail)
           // this.jztest.inspectionRecordList.push(this.queryinspectionRecordList)
            this.jztest.prescriptionDetail.push(this.queryprescriptionDetail)*/
            console.log(this.jztest)
            addCustomerpetjz(this.jztest).then(response => {
              this.$modal.msgSuccess("就诊完成");
              //清空 queryparam 数据
              this.reset();
            });

          }
      });
    },

  },
  mounted() {
    this.MaterielList = this.loadAll();
    this.InspectionList = this.loadAlljc();
  }
};
</script>
<style>

.box-all {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hospital {
  margin-left: 45%;
  height: 100px;
}
.zhongjian{
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}
.left{
  width: 60%;
  margin-right: 0%;
}

.right{
  width: 40%;
  margin-left: 0%;

}
.bottom{
  margin-left: 20%;

  height: 100px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;



    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
